<template>
    <!-- 这里是swiper的用法：div的根元素的class名字对应new Swiper的第一个参数即(`.${this.className}`,...) -->
    <div class="swiper-container swiper" :class="className">
      <div class="swiper-wrapper">
        <slot></slot>
      </div>
    </div>
  </template>

<script>
// 使用swiper/bundle导入全部swiper捆绑包，即全部的swiper功能，否则，你就需要按需导入各个功能譬如分页器等等
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

export default {
  props: {
    perView: {
      type: Number,
      default: 3.5
    },
    interval: {
      type: Number,
      default: 16
    },
    className: {
      type: String,
      default: 'swiper'
    }
  },
  mounted () {
    // 注意这里写`.${this.className}`会出bug
    // 根据不同的class创建swiper，不然class一样swiper的css会出问题，被统一更改
    new Swiper('.' + this.className, {
      slidesPerView: this.perView,
      spaceBetween: this.interval
    })
  }
}
</script>

  <style lang="scss" scoped>

  </style>
